<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body{
            padding: 50px;
        }
        .tooltip {
            width: 100px;
            height: 40px;
            box-sizing: border-box;
            outline: none;
            position: relative;
        }
        .tooltip::before {
            display: none;
            position: absolute;
            z-index: 1;
            content: attr(data-tooltip-text); /* 使用attr() 函数获取该元素上指定的属性值 */
            width: 100px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            height: 40px;
            line-height: 40px;
            border-radius: 4px;
            background: #5d5757;
            color: #fff;

            /* 漂浮在按钮上方并居中 */
            top: 0;
            left: calc(50% - 50px); /* 居中显示 */
            transform: translateY(-120%); /* 向上的平移120%自身的高度，如果自身是10px 那么平移 12px */
        }
        .tooltip::after{
            display: none;
            position: absolute;
            z-index: 1;
            content: '';

            /* 设置三角形关键代码 */
            width: 0;
            height: 0;
            border: 5px solid transparent;
            border-top-color: #5d5757;

            /* 漂浮在按钮上方并居中 */
            top: 0;
            left: calc(50% - 5px);
            transform: translateY(-80%);
        }

        /* hover的时候显示tooltip */
        .tooltip:hover::before,.tooltip:hover::after{
            display:block;
        }
    </style>
</head>
<body>
    <button class="tooltip" data-tooltip-text="提示文字">按钮</button>
</body>
</html>